<template>
    <div class="public_main_style">
        <!-- ETable -->
        <ETable ref="table" :columns="columns" :getData="getTableData">
            <template slot="head">
                <el-button
                        @click="editUserInfo"
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus"
                >新增角色</el-button>
            </template>
            <template slot="state" slot-scope="{ row }">
                <el-tag size="small" v-if="row.status == '0'">正常</el-tag>
                <el-tag size="small" type="danger" v-else>禁用</el-tag>
            </template>
            <template slot="handler" slot-scope="{row}">
                <el-button size="mini" type="primary" @click="editUserInfo(row)">修改</el-button>
            </template>
        </ETable>
        <!--  -->
        <roleModel ref="roleModel" :roleId="roleId" @success="updataTableList" />
    </div>
</template>

<script>
    import roleModel from './components/roleModel'

    export default {
        data() {
            return {
                roleId: '',
                filters: {
                    name: '',
                },
                columns: [
                    {
                        prop: 'roleName',
                        label: '昵称',
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'state',
                    },
                    {
                        prop: 'updateTime',
                        label: '更新时间',
                    },
                    {
                        prop: 'remark',
                        label: '备注',
                    },
                    {
                        label: '操作',
                        slotName: 'handler',
                    }
                ]
            }
        },

        components: {
            roleModel
        },

        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (
                    await this.$http.post('/cms/auth/role/list', {
                        ...arg,
                        ...this.filters
                    })
                )
            },
            //修改角色信息
            editUserInfo(row) {
                if (row && row.roleId) {
                    this.roleId = row.roleId
                } else {
                    this.roleId = null
                }
                this.$refs.roleModel.showRoleModel = true
            },
            //更新列表数据
            updataTableList() {
                this.$refs.table.updateTable()
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
